<template>
  <div class="login-box">
    <el-form ref="loginFormRef" :rules="rules" :model="loginForm" status-icon label-width="70px" class="loginForm">
      <h1>
        <i>Pet Shop</i>
      </h1>
      <h3><i>admin</i></h3>
      <el-form-item label="账号：" prop="account">
        <el-input v-model="loginForm.account" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码：" prop="password">
        <el-input v-model="loginForm.password" type="password" autocomplete="off" @keyup.native.enter="submitForm" />
      </el-form-item>
      <el-form-item label="验 证：" prop="yanzhengma">
        <template>
          <div class="code_box">
            <el-input
              class="code_input"
              type="text"
              placeholder="请输入验证码"
              v-model.trim="loginForm.code"
              @keyup.native.enter="submitForm" />
            <canvas id="canvas" width="100px" height="33px" @click="handleCanvas"></canvas>
          </div>
        </template>
      </el-form-item>
      <el-form-item>
        <el-button class="sub-btn" type="primary" @click="submitForm()">登陆</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { adminLogin } from '@/api/admin'
import { draw } from '@/views/common/code.js'
export default {
  name: 'AdminLogin',
  data() {
    const validCode = (rule, value, callback) => {
      if (!this.loginForm.code) {
        callback('请输入验证码')
      } else {
        callback()
      }
    }
    return {
      loginForm: {
        account: '',
        password: '',
        code: '',
        code_arr: [],
        true_code: '',
      },
      rules: {
        account: [
          { required: true, message: '请输入用户账号', trigger: 'blur' },
          { min: 6, max: 24, message: '用户账号长度在6-24位', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入用户密码', trigger: 'blur' },
          { min: 6, max: 24, message: '用户密码长度在6-24位', trigger: 'blur' },
        ],
        yanzhengma: [{ required: true, validator: validCode, trigger: 'blur' }],
      },
    }
  },
  mounted() {
    this.loginForm.true_code = draw(this.loginForm.code_arr)
  },
  methods: {
    handleCanvas() {
      this.loginForm.true_code = draw(this.loginForm.code_arr)
    },
    async submitForm() {
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) return
        if (this.loginForm.code !== this.loginForm.true_code) return this.$message.error('验证码错误！')
        const result = await adminLogin({ ...this.loginForm })
        if (result.status != 0) return this.$message.error(result.message)
        window.sessionStorage.removeItem('token')
        window.sessionStorage.setItem('token', result.token)
        this.$store.commit('setAdmin', result.data)
        this.$router.push({ name: 'adminHome' })
      })
    },
  },
}
</script>

<style lang="less" scoped>
.login-box {
  width: 100%;
  height: 100%;
  background-image: url('https://ts1.cn.mm.bing.net/th/id/R-C.e6a90ffe9456bc30db869a4f8375881b?rik=p0LRs9zU7k6oXw&riu=http%3a%2f%2fwww.kutoo8.com%2fupload%2fimage%2f21883770%2f11_1920x1080.jpg&ehk=sOF72CG8sltnFuNiDrzq0GV51L8Zr3HjzxgSu%2bQXL6s%3d&risl=&pid=ImgRaw&r=0');
  background-repeat: no-repeat;
  background-size: cover;
  box-sizing: border-box;
  padding-top: 200px;
  .loginForm {
    width: 400px;
    padding: 20px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.5);
    margin: 0 auto;
    h1,
    h3 {
      text-align: center;
      color: #fff;
      margin: 20px 0;
    }
    .sub-btn {
      width: 100%;
    }
  }
}
.code_box {
  display: flex;
}
#canvas {
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 80px;
}
</style>
